<template>
    <div>
        <div class="much_content">
            <div>
                <el-image class="much_content_image" :src="mchlist.logo"></el-image>
            </div>
            <span class="much_content_name">{{mchlist.name}}</span>
        </div>
        <div class="articleCategoryclass">
            <div v-for="(item,index) in articleCategoryList" :key="item.id" class="nav-item">
                <span :class="index==Categoryindex?'articleCategoryclass_text  text-color':'articleCategoryclass_text'" @click="categoryclick(index,item.id)">{{item.name}}</span>
                <div :class="[index==Categoryindex?'nav_line_colorOne':'nav_line_colorTwo']" class="nav_line"></div>
            </div>
        </div>
        <div class="content">
            <div class="content_left">
                <div class="content_left_cont" v-for="(item,index) in articleArray" v-if="index%2==0">
                    <el-image class="content_left_cont_image" :src="item.thumbnail"></el-image>
                    <div class="content_left_cont_subTitle">{{item.title}}</div>
                    <div style="margin-top:10px;display:flex;align-items:center">
                        <el-image src="http://cdn.rzico.com/dinnerBar/morentoux.jpg" style="width:25px;height:25px;border-radius: 100px;display:block"></el-image>
                        <span class="member_name">张三</span>
                    </div>
                </div>
            </div>
            <div class="content_right">
                <div class="content_left_cont" v-for="(item,index) in articleArray" v-if="index%2!=0">
                    <el-image class="content_left_cont_image" :src="item.thumbnail"></el-image>
                    <div class="content_left_cont_subTitle">{{item.title}}</div>
                    <div style="margin-top:10px;display:flex;align-items:center">
                        <el-image src="http://cdn.rzico.com/dinnerBar/morentoux.jpg" style="width:25px;height:25px;border-radius: 100px;display:block"></el-image>
                        <span class="member_name">张三</span>
                    </div>
                </div>
            </div>
            <noData v-if="articleArray.length===0"></noData>
        </div>
    </div>
</template>
<script>
import { getInfo } from "@/api/sysSetUp";
import { list } from "@/api/articleCategory";
import { list as articlelist } from "@/api/article";
import noData from '../product/components/noData'
import utils from "../../../../utils/utils";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            articleCategoryList: [],
            Categoryindex: 0,
            articleArray: [],
            CategoryId: "",
            pageNum: 1,
            pageSize: 20,
            mchlist: {},
            tagIds: [],
        };
    },
    created() {
        this.articlelist();
        this.articlelistclick();
        this.getInfoclick();
    },
    computed: {
        ...mapGetters(["mchId"]),
    },
    props: ["content"],
    components:{
        noData
    },
    methods: {
        getInfoclick() {
            getInfo().then((res) => {
                this.mchlist = res.data;
            });
        },
        articlelistclick() {
            if (!utils.isNull(this.content.tagids)) {
                this.tagIds = this.content.tagids.split(",");
                for (var i = 0; i < this.tagIds.length; i++) {
                    this.tagIds[i] = parseInt(this.tagIds[i]);
                }
            }
            let params = new URLSearchParams();
            params.append("articleCategoryId", this.CategoryId);
            params.append("pageNum", this.pageNum);
            params.append("pageSize", this.pageSize);
            for (var i = 0; i < this.tagIds.length; i++) {
                params.append("tagIds", this.tagIds[i]);
            }
            articlelist(params).then((res) => {
                this.articleArray = res.data.data;
            });
        },
        categoryclick(index, id) {
            this.Categoryindex = index;
            this.CategoryId = id;
            this.articlelistclick();
        },
        articlelist() {
            list().then((res) => {
                res.data.unshift({
                    name: "全部商品",
                    id: "",
                });
                this.articleCategoryList = res.data;
            });
        },
    },
};
</script>
 <style scoped>
.articleCategoryclass {
    display: flex;
    padding-left: 10px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
    overflow: auto;
    width: 363px;
    box-sizing: border-box;
}
.articleCategoryclass_text {
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    white-space: nowrap;
}

.nav_line {
    width: 100%;
    height: 2px;
    border-radius: 20px;
}

.nav_line_colorOne {
    background-color: #ec1b24;
}

.nav_line_colorTwo {
    background-color: #f8f8f8;
}

.content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}
.nav-item {
    padding-right: 10px;
    display: inline-block;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    cursor: pointer;
}
.text-color {
    color: #ec1b24;
}
.content_left {

}
.content_left_cont {
    margin-bottom: 20px;
}
.content_left_cont_image {
    width: 172px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.content_left_cont_subTitle {
    width: 100px;
    font-size: 14px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #333333;
    margin-top: 5px;
}
.much_content {
    display: flex;
    align-items: center;
    background-color: rgb(223, 88, 88);
    margin-bottom: 10px;
}
.much_content_image {
    width: 50px;
    height: 50px;
    display: block;
}

.much_content_name {
    font-size: 16px;
    color: white;
    margin-left: 10px;
}

.member_name{
    font-size: 14px;
    color: #C0C4CC;
    margin-left: 10px;
}
</style>
